<template>
	<view class="text-df">
		<view class="padding-lg bg-white">
			<view class="text-lg theme-color text-bold">投诉意见</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">地址：</view>
				<view> {{compose.location}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">详细地址：</view>
				<view> {{compose.fullAddress}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">上报时间：</view>
				<view> {{compose.createTime}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">链接：</view>
				<view style="width: 70%;"> {{compose.url}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">时间：</view>
				<view style="width: 70%;"> {{compose.time}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">来源：</view>
				<view style="width: 70%;"> {{compose.source}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">类型：</view>
				<view style="width: 70%;"> {{compose.category}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">内容摘要：</view>
				<view style="width: 70%;"> {{compose.content}}</view>
			</view>
			<view class="margin-tb-sm">图片描述：</view>
			<view style="display: flex; flex-wrap: wrap;">
				<image v-for="(item,index) in compose.imageList" :key="index" :src="item.url"
					style="width: 150rpx; height: 150rpx;" mode="aspectFill" class="margin-right-sm margin-top-sm">
				</image>
			</view>
			
		</view>

		<view class="padding-lg bg-white margin-top-sm">
			<view class="text-lg theme-color text-bold">辖区分配</view>
			<view class="flex-row margin-top-sm">
				<view style="width: 23%;">辖区选择：</view>
				<view class="flex-row-bt text-sm text-low" @click="show=true" style="width: 77%;">
					<view class="" style="">{{select}}
					</view>
					<uni-icons type="right" color="#aaaaaa" size="16"></uni-icons>
				</view>
			</view>
			<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="cancel"
				@change="changeHandler"></u-picker>
			<!-- <u-line></u-line> -->
		</view>

		<view class="flex-row-bt fix-bottom">
			<button @tap="ondistribution" hover-class="none" class="login-btn theme-color" style="border: 1px solid #247eff;">误报驳回</button>
			<button @tap="distribution" hover-class="none" class="login-btn theme-bg-color text-white" style="">上传分配</button>
		</view>
	</view>
</template>

<script>
	import {
		getFirstAddress,
		getSecondAddress
	} from '../../api/address_api.js'
	import {
		getResultsByAdviseId
	} from '../../api/advise_api.js'
	import {
		sentAddress,
		rejectedAdvise
	} from '../../api/release.js'
	export default {
		data() {
			return {
				uploadfrom:{
					id:0,
					secondAddress:'',
					firstAddress:''
				},
				loading:'',
				locationList:[],
				compose: {
					location: '萍乡市湘东区环境监察大队',
					address: '湘东区环境监测站',
					time: '2024-09-08 09:34:23',
					remark: '湘东区环境监督站制度首秀惹争议',
					imgs: [
						'https://img1.baidu.com/it/u=2949992163,1302627322&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=970',
						'https://img1.baidu.com/it/u=2949992163,1302627322&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=970',
						'https://img1.baidu.com/it/u=2949992163,1302627322&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=970',
						'https://img1.baidu.com/it/u=2949992163,1302627322&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=970',
						'https://img1.baidu.com/it/u=2949992163,1302627322&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=970'
					]
				},

				select: '请选择辖区',
				//级联选择器
				show: false,
				columns: [],
				columnData: [],
			}
		},
		onLoad(options) {
			this.uploadfrom.id = options.id
			this.getFirstAddress()
			this.getinfo(options.id)
			console.log(options.id)
		},
		methods: {
			cancel(e) {
				this.show = false
			},
			// 获取分配信息
			getinfo(id){
				console.log(id)
				getResultsByAdviseId(id).then(res=>{
					this.compose = res.data.advise
					console.log(res.data.advise)
				})
			},
			//获取一级辖区列表
			getFirstAddress() {
				getFirstAddress().then(res => {
					this.locationList = res.data
					let arr = []
					arr = res.data.map(item => item.address);
					getSecondAddress(res.data[0].id).then(res => {
						this.columnData = res.data.map(item => (item.address))
						this.columns = [arr, [...this.columnData]]
						this.loading = false
					})
				})
			},
			//获取二级辖区列表
			getSecondAddress(id) {
				getSecondAddress(id).then(res => {
					this.columnData = res.data.map(item => (item.address))
					this.loading = false
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.loading = true
					if (index === 0) {
						this.loading = false
					} else {
						let targetObject = this.locationList.find(obj => obj.address === this.columns[0][index]);
						// 如果找到了具有匹配 name 属性值的对象，则获取其 id 属性值
						if (targetObject) {
							let idValue = targetObject.id;
							console.log(idValue)
							getSecondAddress(idValue).then(res => {
								console.log(res)
								this.columnData = res.data.map(item => (item.address))
								this.loading = false
								picker.setColumnValues(1, this.columnData)
							})
						}
					}

					// this.columnData = this.getSecondAddress(index)
					//    uni.$u.sleep(1500).then(() => {
					// console.log(this.columnData,'2323232')
					//  })
					// picker为选择器this实例，变化第二列对应的选项
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', this.columns)
				this.uploadfrom.firstAddress = e.value[0]
				this.uploadfrom.secondAddress = e.value[1]
				this.select = e.value[0] + '/' + e.value[1]
				this.show =false
			},
			// 分配确定按钮
			distribution(){
				uni.showModal({
					title: '提示',
					content:  '确认分配于' + this.uploadfrom.firstAddress + "/" + this.uploadfrom.secondAddress,
					success: (res) => {
						if (res.confirm) {
							sentAddress(this.uploadfrom.id,this.uploadfrom.firstAddress,this.uploadfrom.secondAddress).then(res =>{
								console.log(res)
								if(res.code === 200){
									uni.showToast({
										title:"分配成功"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 误报驳回
			ondistribution(){
				uni.showModal({
					title: '提示',
					content: '确定误报驳回吗？',
					success: (res)=> {
						if (res.confirm) {
							rejectedAdvise(this.uploadfrom.id).then(res =>{
								if(res.code === 200){
									uni.showToast({
										title:"驳回成功"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.login-btn {
			height: 40px;
			font-size: 14px;
			line-height: 40px;
			width: 90%;
			justify-content: center;
			margin: 0 5%;
		}

		.fix-bottom {
			bottom: 3%;
			position: fixed;
			width: 100%;
		}
</style>
